<!DOCTYPE html>
<html>
<head>
    <title>RC Circuit Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="450" height="350"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style setup to mimic hand-drawn look
        ctx.lineWidth = 3;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        
        // Define key coordinates
        const yTop = 100;
        const yBottom = 220;
        const xStart = 60;
        const xEnd = 320;
        const xJunction = 220;

        // --- Helper function for terminals ---
        function drawTerminal(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 4.5, 0, 2 * Math.PI);
            ctx.fill();
        }

        // --- Draw Terminals ---
        drawTerminal(xStart, yTop);     // Input A terminal
        drawTerminal(xEnd, yTop);       // Output B terminal
        drawTerminal(xStart, yBottom);  // Bottom-left terminal
        drawTerminal(xEnd, yBottom);    // Bottom-right terminal

        // --- Draw Wires ---
        // Top wire from A to capacitor
        ctx.beginPath();
        ctx.moveTo(xStart, yTop);
        ctx.lineTo(120, yTop);
        ctx.stroke();

        // Top wire from capacitor to B
        ctx.beginPath();
        ctx.moveTo(135, yTop);
        ctx.lineTo(xEnd, yTop);
        ctx.stroke();

        // Bottom (ground) wire
        ctx.beginPath();
        ctx.moveTo(xStart, yBottom);
        ctx.lineTo(xEnd, yBottom);
        ctx.stroke();
        
        // --- Draw Components ---
        // Capacitor Symbol
        const capX1 = 120;
        const capX2 = 135;
        const plateHeight = 20;
        ctx.beginPath();
        ctx.moveTo(capX1, yTop - plateHeight);
        ctx.lineTo(capX1, yTop + plateHeight);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(capX2, yTop - plateHeight);
        ctx.lineTo(capX2, yTop + plateHeight);
        ctx.stroke();

        // Resistor Branch
        // Top lead of resistor
        ctx.beginPath();
        ctx.moveTo(xJunction, yTop);
        ctx.lineTo(xJunction, yTop + 20);
        ctx.stroke();
        
        // Resistor Zigzag
        const resX = xJunction;
        const resY1 = yTop + 20;
        const resY2 = yBottom - 20;
        const resW = 15; // half width of zigzag
        ctx.beginPath();
        ctx.moveTo(resX, resY1);
        ctx.lineTo(resX + resW, resY1 + (resY2 - resY1) * 0.125);
        ctx.lineTo(resX - resW, resY1 + (resY2 - resY1) * 0.375);
        ctx.lineTo(resX + resW, resY1 + (resY2 - resY1) * 0.625);
        ctx.lineTo(resX - resW, resY1 + (resY2 - resY1) * 0.875);
        ctx.lineTo(resX, resY2);
        ctx.stroke();

        // Bottom lead of resistor
        ctx.beginPath();
        ctx.moveTo(xJunction, resY2);
        ctx.lineTo(xJunction, yBottom);
        ctx.stroke();

        // --- Draw Labels ---
        // Using a font that approximates the original's style
        const baseFont = '"Comic Sans MS", cursive, sans-serif';

        // Labels A and B
        ctx.font = `bold 28px ${baseFont}`;
        ctx.textAlign = 'center';
        ctx.fillText('A', xStart - 25, yTop + 8);
        ctx.fillText('B', xEnd + 15, yTop + 8);
        
        // Component Values
        ctx.font = `bold 24px ${baseFont}`;
        ctx.fillText('1 µF', (capX1 + capX2) / 2, yTop + 45);
        ctx.textAlign = 'left';
        ctx.fillText('1K', xJunction + 25, yTop + 75);

        // Figure Caption
        ctx.font = `bold 26px ${baseFont}`;
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 3.14', canvas.width / 2 - 40, yBottom + 60);
    </script>
</body>
</html>